<script setup lang="ts">
import {h} from 'vue'
import {NButton, useMessage} from 'naive-ui'
import type {DataTableColumns} from 'naive-ui'

const message = useMessage()

interface Song {
  no: number
  title: string
  length: string
}

function createColumns(
  {
    play
  }: {
    play: (row: Song) => void
  }
): DataTableColumns<Song> {
  return [
    {
      title: 'No',
      key: 'no'
    },
    {
      title: 'Title',
      key: 'title',
      resizable: true
    },
    {
      title: 'Length',
      key: 'length'
    },
    {
      title: 'Action',
      key: 'actions',
      render(row) {
        return h(
          NButton,
          {
            strong: true,
            tertiary: true,
            size: 'small',
            onClick: () => play(row)
          },
          {default: () => 'Play'}
        )
      }
    }
  ]
}

const data: Song[] = [
  {no: 3, title: 'Wonderwall', length: '4:18'},
  {no: 4, title: 'Don\'t Look Back in Anger', length: '4:48'},
  {no: 12, title: 'Champagne Supernova', length: '7:27'}
]

const columns = createColumns({
  play(row: Song) {
    message.info(`Play ${row.title}`)
  }
})

const pagination = false as const
</script>

<template>
  <div class="server-list">
    <n-data-table
      :columns="columns"
      :data="data"
      :pagination="pagination"
      :bordered="false"
    />
  </div>
</template>

<style scoped>

</style>
